<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script type="text/javascript"
            th:src="@{https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js}"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link th:href="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" th:href="@{/css/styles.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" />
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
<div id="particles-js"></div>
<div style="position: absolute; float: left">
    <div style="height: 80px">
        <input type="search" name="word" id="search" style="margin-left:420px;margin-top:20px;width: 380px;height:40px;padding-left:12px;border-radius: 4px;border:0;font-size:18px">
        <button id="btn"class="btn btn-primary btn-lg" style="margin-top:-3px;margin-left:15px" onclick=getList($("#search").val())>搜索</button>
        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="margin-left:300px">新增</button>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">新闻</h4>
                    </div>
                    标题<input type="text" name="title" id="title"><br>
                    内容<textarea name="detail" id="detail"></textarea>><br>
                    分类<select id="tid">
                        <option th:each="type:${session.types}" th:id="${type.id}" th:text="${type.tname}"></option>
                </select>
                    <input type="file" name="file" id="img">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="submit()" data-dismiss="modal">提交更改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <div class="top">
        <ul style="height: 30px; line-height: 30px; text-align: center">
            <li class="tname" style="float:left;color:#fff;font-size:25px;width:100px" th:each="type:${session.types}" >
                <a th:href="@{/news/list(tid=${type.id})}" th:text="${type.tname}"></a>
            </li>
        </ul>
    </div>
    <div class="context" style="height:600px">
        <div class="detail" style="width: 300px;height: 300px;float:left;padding:20px 15px;display:inline-block;" th:each="news:${session.pageInfo.getList()}">
            <img th:src="@{'/'+${news.tid}+'/'+${news.img}}">
            <span th:text="${news.tname}"></span>
            <a th:href="@{/news/delete(id=${news.id})}">删除</a>
            <div style="text-align:center">
                <span style="font-size: 28px;color: #fff" th:text="${news.title}"></span>
            </div>
        </div>
        <!--页码-->
        <div class="pagenum">
            <ul>
                <li><a th:href="@{/news/index}">home</a></li>
                <!--上一页-->
                <li><a th:href="@{/news/index(pageNum=${session.currPageNum}-1)}">pre</a></li>
                <!--遍历所有页码  PageInfo-->
                <li th:each="pagenum:${session.pageInfo.navigatepageNums}">
                    <a th:href="@{/news/index(pageNum=${pagenum})}" th:text="${pagenum}"></a>
                </li>
                <!--下一页-->
                <li><a th:href="@{/news/index(pageNum=${session.currPageNum}+1)}">next</a></li>
                <li><a th:href="@{/news/index(pageNum=${session.pageInfo.getPages()})}">end</a></li>
            </ul>
        </div>
    </div>
</div>
<script th:src="@{/js/particles.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
</body>